<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>打印骑行证</title>

    <!-- CDN引入start -->
    <!-- import Vue.js -->
    <script src="//unpkg.com/vue@2.6.14/dist/vue.min.js"></script>
    <!-- import stylesheet -->
    <link
      rel="stylesheet"
      href="//unpkg.com/view-design/dist/styles/iview.css"
    />
    <!-- import iView -->
    <script src="//unpkg.com/view-design/dist/iview.min.js"></script>
    <!-- CDN引入end -->
    <!-- 引发顶行的css -->
    <link rel="stylesheet" href="css/home.css" />
    <!-- 引入jQuery -->
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>

    <!--生成图片脚本引入开始 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/html2canvas/0.5.0-beta4/html2canvas.min.js"></script>
    <!-- 生成图片脚本引入结束 -->

    <link rel="stylesheet" href="css/home.css" />

    <script>
      if (sessionStorage.getItem("username") == null) {
        window.location.href = "login.html";
      }
    </script>
    <style>
      .demo-drawer-profile {
        font-size: 14px;
      }

      .demo-drawer-profile .ivu-col {
        margin-bottom: 12px;
      }

      .contentCard {
        width: 340px;
        margin: 5px;
      }

      .pcitureImg img {
        width: 340px;
        height: 227px;
      }

      .pictureInfo {
        /* 定位 */
        position: relative;
        width: 280px;
        /* background-color: yellow; */
        margin-top: -200px;
        margin-left: 122px;
      }

      .pictureInfo .ivu-col {
        font-size: 10px;
      }
    </style>
  </head>

  <body>
    <div id="pictureCardBox">
      <!-- 上边栏 -->
      <Layout>
        <!-- <Header>
                <i-menu mode="horizontal" theme="light" active-name="addUser.html" @on-select="navTo">
                    <div class="layout-logo">
                        <img style="height: 100%;width: auto;margin: auto;" src="images/favicon.ico">
                    </div>

                    <div class="layout-nav">
                        <menu-item name="index.html">
                            <i class="ivu-icon ivu-icon-md-list-box"></i>信息管理
                        </menu-item>
                        下拉菜单
                        <Submenu name="grant">
                            <template slot="title">
                                <i class="ivu-icon ivu-icon-ios-stats">
                                    账户管理
                            </template>
                        <Dropdown @on-click="mine" style="margin-left: 20px">
                            <Avatar :style="{background: color[Math.floor(Math.random()*4)]}">{{username}}</Avatar>
                            <dropdown-menu slot="list">
                                <dropdown-item name="退出" style="text-align: center;">退出</dropdown-item>
                            </dropdown-menu>
                        </Dropdown>
                    </div>
                </i-menu>
            </Header> -->
        <header>
          <!-- 标题-->

          <!-- navTo用于导航页面之间的跳转 -->
          <!-- @on-select获取点击是二级菜单传入的name -->
          <i-menu mode="horizontal" theme="light" @on-select="navTo">
            <div class="layout-logo">
              <img
                style="height: 200%; width: 200%; margin: 0 auto 5px"
                src="images/favicon.png"
              />
            </div>
            <!-- <h1 style="display: inline-block;">打印骑行证</h1> -->
            <div class="layout-nav">
              <menu-item name="index.html">
                <i class="ivu-icon ivu-icon-md-list-box"></i>信息管理
              </menu-item>
              <menu-item
                name="showUsers.html"
                id="getHtml"
                @click="getAuthority"
              >
                <i class="ivu-icon iconfont icon-chengyuanweihu"></i> 账户管理
              </menu-item>
              <!-- <i-button @click="getAuthority">测试</i-button> -->
              <Dropdown @on-click="mine" style="margin-left: 20px">
                <Avatar
                  :style="{background: color[Math.floor(Math.random()*4)]}"
                  >{{username}}</Avatar
                >
                <dropdown-menu slot="list">
                  <dropdown-item name="退出" style="text-align: center"
                    >退出</dropdown-item
                  >
                </dropdown-menu>
              </Dropdown>
            </div>
          </i-menu>
        </header>
      </Layout>
      <div
        style="
          width: 80%;
          display: flex;
          justify-content: space-between;
          margin-top: 50px;
        "
      >
        <!-- 内容 -->
        <div style="width: 842px; margin: auto" id="pictureCard">
          <div v-for="proof in proofs" style="display: inline-block">
            <div class="contentCard">
              <Row>
                <!-- span 间隔几个字符 -->
                <div class="pcitureImg">
                  <img src="images/骑行证.png" alt="骑行证" />
                </div>
                <div class="pictureInfo">
                  <i-col style="margin-top: 10px"> 骑行证号码: </i-col>
                  <i-col style="font-size: 17px; color: brown">
                    {{proof.passport_id}}
                  </i-col>
                  <i-col style="font-size: 14px; margin: 20px 0 30px 0">
                    姓名: {{proof.name}}
                  </i-col>
                  <i-col> 所在校区: {{proof.campus}} </i-col>
                  <i-col> 骑行证类型: {{proof.passport_type}} </i-col>
                </div>
              </Row>
            </div>
          </div>
        </div>

        <div style="width: 210px">
          <p style="font-size: 30px; font-weight: bold; margin-bottom: 20px">
            打印校园骑行证
          </p>
          <i-button onclick="printpage()" long="true" type="success"
            >一键打印</i-button
          >
        </div>
      </div>

      <div id="endBox"></div>
    </div>
  </body>
  <script>
    // 打印
    function printpage() {
      // 获取一开始的页面
      originalHtml = window.document.body.innerHTML;
      // innerHTML 属性设置或返回表格行的开始和结束标签之间的 HTML。
      document.body.innerHTML =
        document.getElementById("pictureCard").innerHTML +
        document.getElementById("endBox").innerHTML;
      // document.body.innerHTML = document.getElementById('printCard').innerHTML+document.getElementById('handleSelectAllBox').innerHTML;
      window.print();
      //恢复打印前的页面
      window.document.body.innerHTML = originalHtml;
    }
    new Vue({
      el: "#pictureCardBox",
      data: {
        username: sessionStorage.getItem("username"),
        color: ["#f56a00", "#7265e6", "#ffbf00", "#00a2ae"],

        // 选中记录的数据
        // 会话存储  JSON.parse(sessionStorage.getItem('proofs')将其转化回来 使列表渲染获取数据
        proofs: JSON.parse(sessionStorage.getItem("proofs")),
      },
      methods: {
        //上边
        navTo(name) {
          if (name == "showUsers.html") {
            this.getAuthority();
          } else {
            window.location.href = name;
          }
        },
        //左边
        contentTo(name) {
          this.contentName = name;
        },
        mine(name) {
          if ((name = "退出")) {
            sessionStorage.removeItem("username");
            sessionStorage.removeItem("phone");
            window.location = "login.html";
          }
        },
        // 是否允许进入管理权限
        getAuthority() {
          var that = this;
          $.ajax({
            url: "http://3v.gsdse.cn/UEBIMP/public/index.php/index/User/adminCheck",
            type: "POST",
            data: {
              phone: sessionStorage.getItem("phone"),
            },
            // 发送请求成功
            success(res) {
              if (res.error_code == 0) {
                // that.whichHtml = "showUsers.html";
                // console.log(that.$refs["getHtml"]);
                // that.$refs["getHtml"].css({"pointer-events": "none"});
                // 禁止未设置成功
                // $(".layout-nav #getHtml").css({"pointer-events":"none"});
                // console.log(that.whichHtml);
                // $(".layout-nav a").addClass("disabledClass");

                // 原生js跳转语句
                window.location.href = "showUsers.html";
              } else if (res.error_code == 1) {
                that.whichHtml = "index.html";
                // console.log(sessionStorage.getItem("phone"));
                that.$Notice.error({
                  title: "您无权访问此页面",
                });
              } else if (res.error_code == 2) {
                that.whichHtml = "index.html";
                that.$Notice.warning({
                  title: res.msg,
                });
              }
            },
            error(res) {
              console.log("请求发送失败！");
            },
          });
        },
      },
      // watch 监测数据
      watch: {
        contentName: {
          /*immediate: true;使页面一加载就先出现handler函数以监测（一般是先看数据再监测，
                但是这个用于切换，即点击新页面，就会传来newName然后用ajax请求跳转页面，如果一开始没有
                就先出来这个函数监测，那么点击了某个页面后就不能一开始就跳转）*/
          immediate: true,
          handler(newName) {
            console.log("局部页面切换，现为" + newName);
            // 获取请求页面
            var url = newName;
            $.ajax({
              type: "get",
              dataType: "html",
              url: url,
              success: function (res) {
                // 添加页面内容
                $("#content").html(res);
                // 将获取的html放到内容切换页(id="content")(105行左右)展示
              },
            });
          },
        },
      },
      mounted: function () {
        console.log(this.proofs);
      },
    });
  </script>
</html>
